<template>
  <h2>{{route.meta.title}}</h2>
    <div class="content">
      <div>当前设置:</div>
      <div>{{oldTime}}小时学习时长,兑换一小时单人卡劵</div>
      <div>修改为:</div>
      <div><el-input v-model="newTime" style="width:20%" size="small"/><span>小时学习时长,兑换一小时单人卡劵</span></div>
      <el-button type="primary" @click="changeTime">确认修改</el-button>
  </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const data = reactive({
      oldTime : '',
      newTime : '',
      // 方法
      changeTime() {
        data.oldTime = data.newTime
        data.newTime = ''
      }
    })


    return { ...toRefs(data),route }
  }
}
</script>

<style lang="scss" scoped>

  h2 {
  margin: 0;
  font-size: 18px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 14px;
  width: 22%;
  box-sizing: border-box;
  padding: 2%;
  height: 200px;
  margin-top: 1%;
  background-color: rgba(242,242,242,.6);
}
</style>